<template>
  <PageWrapper contentFullHeight fixedHeight contentClass="flex">
    <DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
    <div class="w-3/4 xl:w-4/5 pl-5">
      <VxeBasicTable ref="tableRef" v-bind="gridOptions">
        <template #action="{ row }">
          <a-space>
            <a-tooltip placement="bottom">
              <template #title>
                <span>编辑用户资料</span>
              </template>
              <a-button type="link" size="small" @click="handleEdit(row)">
                <template #icon><Icon icon="clarity:note-edit-line" /></template>
              </a-button>
            </a-tooltip>
            <a-tooltip placement="bottom">
              <template #title>
                <span>删除此账号</span>
              </template>
              <a-button type="link" danger size="small">
                <template #icon>
                  <a-popconfirm placement="left" title="是否确认删除？" ok-text="确定" cancel-text="取消" @confirm="handleDelete(row)">
                    <Icon icon="ant-design:delete-outlined" />
                  </a-popconfirm>
                </template>
              </a-button>
            </a-tooltip>
          </a-space>
        </template>
      </VxeBasicTable>
    </div>
    <AccountDrawer @register="registerDrawer" @success="reloadTableData" />
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import { message } from "ant-design-vue";
  import { Icon } from '@gui-pkg/components';
  import { PageWrapper, BasicTableProps, VxeBasicTable, VxeGridInstance, useDrawer } from '@gui-pkg/antdcomponents';
  import { columns, searchFormSchema } from './account.data';
  import { getAccountList, delUser,getAccountDetails } from '@/api/system/account';
  import DeptTree from './DeptTree.vue';
  import AccountDrawer from './AccountDrawer.vue';

  defineOptions({ name: 'AccountManagement' });

  const [registerDrawer, { openDrawer }] = useDrawer();
  const tableRef = ref<VxeGridInstance>();
  const gridOptions = reactive<BasicTableProps>({
    id: tableRef.value,
    keepSource: true,
    editConfig: { trigger: 'click', mode: 'cell', showStatus: true },
    columns: columns,
    toolbarConfig: {
      className: "vxe-toolbarConfig",
      buttons: [
        {
          content: '新增账号',
          buttonRender: {
            name: 'AButton',
            props: {
              type: 'primary',
              preIcon: 'grommet-icons:add',
            },
            events: {
              click: () => handleCreate(),
            },
          },
        },
      ],
    },
    formConfig: {
      enabled: true,
      className: "vxe-formConfig",
      items: searchFormSchema,
    },
    height: 'auto',
    proxyConfig: {
      ajax: {
        query: async ({ page, form }) => {
          const tableListData = await getAccountList({
            ...form,
          });
          console.log('---------',tableListData);
          return {list: tableListData};
        },
      },
    },
  });

  const handleSelect = async (deptId = '')=> {
    const tableData = await getAccountList({deptId: deptId});
    tableRef.value.loadData(tableData)
  }

  function handleCreate() {
    openDrawer(true, {
      isUpdate: false,
    });
  }

  // 编辑用户资料
  const handleEdit = async (row) => {
    let sss = await getAccountDetails(row.userId);
    row.roles = sss.roleIds;
    openDrawer(true, {
      record: row,
      isUpdate: true,
    });
  }
  // 删除此账号
  const handleDelete = async (row) => {
// 重新请求菜单表格数据 await delUser(row.id);
    message.success("删除成功！");
    reloadTableData();
  }

  const reloadTableData = async () => {
    const tableListData = await getAccountList();
    tableRef.value.loadData(tableListData);
  };
</script>
